<template>
  <div style="margin-bottom: 16px">
    <fee-pane :isFeePane="true" :orderFeeIndex="orderFeeIndex" :feeTypeSwitch="false" :showStatistic="false" :disabledOnlineFee="true" />
  </div>
</template>
<script setup>
  import { inject, computed, watch } from 'vue'
  import feePane from '../order-fee/fee-pane.vue'
  import { decimalAddition } from '@/utils'
  import { buildTreeData, processTreeData } from '../order-fee/fee-statistic.js'
  const props = defineProps({
    orderFeeIndex: Number,
    order: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const feeForm = inject('feeForm')
  const feeFormItem = computed(() => {
    return feeForm.value.orderFee[props.orderFeeIndex]
  })

  const feeSum = computed(() => {
    let sum = 0
    if (feeFormItem.value) {
      let sumData = processTreeData(buildTreeData([feeFormItem.value]))
      sumData.forEach((item) => {
        sum = decimalAddition(sum, item.value)
      })
    }
    return sum
  })

  watch(
    () => feeSum.value,
    (newVal) => {
      if (newVal) {
        feeForm.value.orderFee[props.orderFeeIndex].activeTotalAmount = newVal
      }
    }
  )
</script>
<style lang="less" scoped></style>
